<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />
    <link rel="stylesheet" href="./css/无敌代码.css">
    <link rel="stylesheet" href=".//css/登录.css">
</head>
<body>
    <div class="dl">
        <div class="dl-l">
            <img src="./imgs/mitu.jpg" alt="">
        </div>
        <div class="dl-r">
            <div class="dl-top">
                <p class="dl-p">
                    <img src="./imgs/小米logo.png" alt="">
                    <span>小米账号</span>
                </p>
                <div class="top-r">
                    <a href="">用户协议</a>
                    <a href="">隐私政策</a>
                    <a href="">帮助中心</a>
                    <span class="ggg">|</span>
                    <a href="">‎中文(简体)‎</a>
                    <span class="rrr"></span>
                </div>
            </div>
        </div>
        
    </div>
    <div class="box">
        
        <div class="box-p">
            <a href="./登录.html">登录</a>
            <a href="./注册.html">注册</a>
        </div>
        <form action="javascript:;">
        <div class="text">
            <input type="text" name="username" placeholder="邮箱/手机号码/小米ID">
        </div>
        <div class="pass">
            <input type="password" name="password" placeholder="密码">
        </div>
        <div class="btn">
            <input type="button" value="登&nbsp;&nbsp;录" class="btn">
        </div>
        </form>
        <div class="box-p2">
            <a href=""><span>忘记密码?</span></a>
            <a href=""><span>手机号登录</span></a>
        </div>
        <p class="box-p3">其他方式登录</p>
        <div class="box-img">
            <a href=""><img src="./imgs/qq (1).png" alt=""></a>
            <a href=""><img src="./imgs/qq (2).png" alt=""></a>
            <a href=""><img src="./imgs/wx (2).png" alt=""></a>
            <a href=""><img src="./imgs/wx (1).png" alt=""></a>
        </div>
    </div>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/layui-layer/dist/layer.js"></script>
<script src="./js/单例模式封装工具库.js"></script>
<script>
$('.btn').click(function(){
    var btn=document.querySelector('.btn');
    var username=document.querySelector('[name="username"]');
    var password=document.querySelector('[name="password"]');
    // 验证表单
    if(username.value===''){
        layer.msg('用户名不能为空');
        return false
    }
    if(password.value===''){
        layer.msg('密码不能为空');
        return false
    }
    // 禁用按钮
    $(this).prop('disabled',true)
    //加载层
    var loadindex=layer.load(1,{
        shade: [1,'#000']
    });
    // 发送Ajax
    $.post('./php/login.php',$('form').serialize(),res=>{
        layer.close(loadindex)
        console.log(res);
        var {meta:{status,msg}}=res;
        if(status===1){
            tool.setCookie('username',$('[name="username"]').val(),7200)
            layer.msg(msg,{
                icon:1,
                time:1500
            },function(){
                var url=localStorage.getItem('url')
                if(url){
                    localStorage.removeItem('url')
                    location.href=url
                    return false;
                }
                location.href='./小米有品.html';
            })
        }else{
            $(this).prop('disabled',false)
            layer.msg(msg,{
                icon:2,
                time:1500
            })
        }
    },'json')

})
</script>
</html>